<!--内容区开始-->
<div class="cont">
    <!--页面遮罩层-->
    <div>
        <!--二级标题-->
        <div class="position " id="page_title">
            <img alt="位置图标" src="dist/images/position.png"/>营销管理&gt;服务管理
            <a ng-click="openDetail()" ng-hide="$needClientCache" title="打开新窗口查看"><i class="large External icon"></i>
            </a>
        </div>
        <!--查看方式-->
        <div class="mybackground">
            <div class="cont_fr_top">
                <div class="menus_top" style="border-bottom: 0px;">
                    <div class="cont_fr_btn">
                        <div class="fr">
                            <button class="cont_f_btn3" ng-click="showAddService()"><i class="add icon"></i>添加</button>
                        </div>
                    </div>
                </div>
                <div class="menus">
                    <div class="menus_con">
                        <div class="ui form">
                            <div class="four fields">
                                <div class="inline field">
                                    <label>服务名称</label>
                                    <input type="text" ng-model="search_param.name" placeholder="服务名称" ng-keyup="$event.keyCode == 13 && search()" style="width: 160px">
                                </div>
                                <div class="inline field">
                                    <label>服务类型</label>
                                    <select ng-model="search_param.type" style="padding: 0.3em 1em; width: 160px">
                                        <option ng-repeat="sel in search_serviceTypes" ng-selected="search_param.type == sel.k" value="{{sel.k}}">{{sel.v}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="fields" style="margin-left: 4.3em;">
                                <div class="four wide field">
                                    <button class="search_btn" ng-click="search()">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="menus_table">
            <table class="ui yellow celled striped table">
                <thead>
                    <tr>
                        <th>服务名称</th>
                        <th>服务类型</th>
                        <th>备注</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                </thead>
                <tbody class="parts_show">
                    <tr ng-repeat="vservice in service_list">
                        <td>{{vservice.name}}</td>
                        <td ng-show="vservice.type==1">内容</td>
                        <td ng-show="vservice.type==2">功能</td>
                        <td class="ellipsis" ng-attr-title="{{vservice.remark}}">{{vservice.remark}}</td>
                        <td style="text-align: center;">
                            <a title="编辑服务" ng-click="showEditService()" class="btn">编辑</a>
                            <a title="删除服务" ng-click="delService()" class="btn">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tbody ng-show="rcode==2">
                    <tr ng-show="!busy">
                        <td colspan="4" style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                    </tr>
                </tbody>
            </table>
            <div ng-if="qyservicePage.pageAll >1 && rcode==1" class="ui pagination fr menu" jspagination page-object="qyservicePage" page-func="getQyServiceList">
            </div>
        </div>
    </div>
</div>
<!--内容区结束-->

<!-- 添加服务 -->
<div class="ui add_service modal">
    <i class="close icon"></i>
    <div class="header_h4">添加服务</div>
    <div class="content">
        <form action="#" class="frm add ui form">
            <div class="two fields">
                <div class="five wide field required">
                    <label class="label_fl">服务名称</label>
                    <input type="text" name="add_name" maxlength="30" placeholder="请填写服务名称" style="width: 160px; ">
                </div>
                <div class="three wide field"></div>
                <div class="five wide field required">
                    <label class="label_fl">服务类型</label>
                    <div class="ui selection dropdown" style="width: 160px">
                        <input type="hidden" name="add_type" id="add_type">
                        <div class="default text">请选择服务类型</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="{{sel.k}}" ng-repeat="sel in serviceTypes">{{sel.v}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="field">
                <label>备注说明</label>
                <div class="ui left icon input">
                    <textarea type="text" rows="5" name="add_remark" maxlength="100" style="overflow:hidden"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!-- 编辑服务 -->
<div class="ui edit_service modal">
    <i class="close icon"></i>
    <div class="header_h4">编辑服务</div>
    <div class="content">
        <form action="#" class="frm edit ui form">
            <input type="hidden" id="update_service_id" name="update_service_id">
            <div class="ui form">
                <div class="two fields">
                    <div class="five wide field required">
                        <label class="label_fl" style="margin-right: 1em">服务名称</label>
                        <input type="text" name="edit_name" ng-model="edit_name" maxlength="30" placeholder="请填写服务名称" style="width: 160px">
                    </div>
                    <div class="three wide field"></div>
                    <div class="five wide field required">
                        <label class="label_fl">服务类型</label>
                        <div class="ui selection dropdown" id="edit_type" style="width: 160px">
                            <input type="hidden" name="edit_type">
                            <div class="default text">请选择服务类型</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="{{sel.k}}" ng-repeat="sel in serviceTypes">{{sel.v}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>备注说明</label>
                    <div class="ui left icon input">
                        <textarea type="text" rows="5" name="edit_remark" ng-model="edit_remark" maxlength="100" style="overflow:hidden"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!--成功-->
<div class="ui modal OK" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge green check circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>
<!--失败-->
<div class="ui modal Fail" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge red remove circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>

<!--确认删除-->
<div class="ui del modal">
    <div class="header" style="text-align: center;">删除服务信息</div>
    <div class="content" style="text-align: center;">
        <i class="huge blue help circle icon"></i>
        <p style="padding-top: 15px;">确认删除该条服务信息吗?</p>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $('.ui.dropdown').dropdown();

    /*添加服务*/
    $('.frm.add').form({
        on: 'blur',
        inline: true,
        fields: {
            add_name: {
                identifier: 'add_name',
                rules: [{
                    type: 'empty',
                    prompt: '套服务称不能为空'
                }]
            },
            add_type: {
                identifier: 'add_type',
                rules: [{
                    type: 'empty',
                    prompt: '服务类型不能为空'
                }]
            },
        }
    });

    /*编辑服务*/
    $('.frm.edit').form({
        on: 'blur',
        inline: true,
        fields: {
            edit_name: {
                identifier: 'edit_name',
                rules: [{
                    type: 'empty',
                    prompt: '套服务称不能为空'
                }]
            },
            edit_type: {
                identifier: 'edit_type',
                rules: [{
                    type: 'empty',
                    prompt: '服务类型不能为空'
                }]
            },
        }
    });


});
</script>